<template>
  <a-modal :width="600" v-model:visible="showPackagingDialog" title="维护包装" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <div class="flex-c">
      <p style="margin: 30px">包装</p>
      <a-select style="width: 300px" v-model="packagingInfo" placeholder="请选择" allow-search allow-clear>
        <a-option value="店铺1" label="店铺1" />
        <a-option value="店铺21" label="店铺21" />
      </a-select>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { Message } from '@arco-design/web-vue'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
  })

  const showPackagingDialog = ref(props.isShow)
  const packagingInfo = ref()
  const submitLoading = ref(false)

  // 关闭
  function closedDialog() {
    packagingInfo.value = {}
    showPackagingDialog.value = false
    emit('closed')
  }
  // 提交
  async function submitData() {
    if (!packagingInfo.value?.id) {
      Message.error('请选择包装')
      return false
    }
    console.log(packagingInfo.value)
    emit('success')
    closedDialog()
  }
</script>
<style lang="less" scoped></style>
